import React, { Component } from 'react'
import { DatePicker, Form, Table } from 'antd'
import api from '../../api'
import { connect } from 'mirrorx'
import IconDom from '../../component/IconDom'
import T from '../../lib/T'
var moment = require('moment')
let FormItem = Form.Item
const { RangePicker } = DatePicker

class Order extends Component {
  constructor (props) {
    super(props)
    this.state = {
      currentPage: 1,
      pageSize: 10,
      rowTotal: 0,
      orderList: [],
      dataSource: [],
      initDateArr: [],
      startTimeStamp: '',
      endTimeStamp: ''
    }
    this.pageChange = this.pageChange.bind(this)
    this.onChangeDate = this.onChangeDate.bind(this)
    this.exportOrder = this.exportOrder.bind(this)
  }
  componentDidMount () {
    this.getOrderList()
  }
  exportOrder () {
    let { startTimeStamp, endTimeStamp } = this.state
    T.ajax({
      url: '/orderexport' + api.exportOrder.path,
      method: 'post',
      data: {
        beginDate: startTimeStamp,
        endDate: endTimeStamp
      }
    })
  }
  onChangeDate (dateStrings) {
    console.log('dateStrings', dateStrings)
    let startStr = dateStrings[0]
    let endStr = dateStrings[1]
    startStr = moment(startStr).set('hour', 0)
    endStr = moment(endStr).set('hour', 23)
    endStr = moment(endStr).set('minute', 59)
    endStr = moment(endStr).set('second', 59)

    let startTimeStamp = new Date(startStr).getTime()
    console.log('startTimeStamp', startTimeStamp)
    let endTimeStamp = new Date(endStr).getTime()
    this.setState({
      startTimeStamp, endTimeStamp
    }, () => {
      this.getOrderList()
    })
  }
  getOrderList () {
    let { currentPage: pageIndex, pageSize, startTimeStamp, endTimeStamp } = this.state
    let now = new Date().getTime()
    let monthAgo = now - 24 * 60 * 60 * 1000 * 30
    // 初始化，时间并未选择，默认一个月前
    if (!startTimeStamp) {
      startTimeStamp = monthAgo
      endTimeStamp = now
      this.setState({
        startTimeStamp, endTimeStamp
      })
    }
    let dateFormat = 'YYYY-MM-DD'
    if (startTimeStamp && endTimeStamp) {
      let initDateArr = [moment(new Date(startTimeStamp), dateFormat), moment(new Date(), dateFormat)]
      this.setState({ initDateArr })
    }
    T.ajax({
      url: api.orderSummaryList.path,
      loading: true,
      data: {
        pageIndex,
        pageSize,
        condition: {
          beginDate: startTimeStamp,
          endDate: endTimeStamp
        }
      }
    }).then(res => {
      console.log('order res', res)
      if (res.code === 0) {
        this.setState({
          orderList: res.data.rows,
          rowTotal: res.data.rowTotal
        })
      }
    })
  }
  pageChange (currentPage) {
    this.setState({ currentPage: currentPage.current }, () => {
      this.getOrderList()
    })
  }
  render () {
    let { orderList, startTimeStamp, endTimeStamp, rowTotal, initDateArr = [] } = this.state
    let { getFieldDecorator } = this.props.form
    let formItemLayout = {
      labelCol: { span: 2 },
      wrapperCol: { span: 18 }
    }
    let url = api.exportOrder.path
    let href = `/export${url}/${startTimeStamp}/${endTimeStamp}`
    const columns = [
      { title: 'Order No', dataIndex: 'orderNo' },
      { title: 'Order Date',
        dataIndex: 'orderTime',
        render: (value) => {
          let time = moment(value).format('YYYY-MM-DD HH:mm:ss')
          return time
        } },
      { title: 'Insured',
        dataIndex: 'insured',
        render: (value, record) => {
          return record.insuredFamilyName + record.insuredFirstName
        } },
      { title: 'Policy', dataIndex: 'policyNo' },
      { title: 'Product', dataIndex: 'productName' },
      { title: 'Insurer', dataIndex: 'insurer' },
      { title: 'Premium',
        dataIndex: 'premium',
        render: (value) => {
          return T.formatPrice(value)
        } },
      { title: 'Coupon',
        dataIndex: 'coupon',
        render: (value) => {
          return <span>{T.formatPrice(value)}</span>
        } },
      { title: 'Payment Amount',
        dataIndex: 'paymentAmount',
        render: (value) => {
          return <span>{T.formatPrice(value)}</span>
        } }
    ]

    let { grantedMenus } = this.props
    let menuAuth = false
    if (grantedMenus) {
      console.log('grantedMenus', grantedMenus)
      menuAuth = T.getMenuAuth('Order', grantedMenus)
    }
    console.log('menuAuth', menuAuth)
    return <div>
      <div className='order'>
        <div className='filter'>
          <Form>
            <FormItem
              {...formItemLayout} label={'Order Date'}>
              {getFieldDecorator('onlineTime', {
                initialValue: initDateArr
              })(
                <RangePicker
                  disabledDate={this.disabledStartDate}
                  onChange={(e, dateArr) => {
                    this.onChangeDate(dateArr)
                  }}
                />)}
            </FormItem>
          </Form>

        </div>
        <div className='mt20 order-list'>
          {
            orderList && orderList.length !== 0
              ? <div>
                <a
                  className={!menuAuth ? 'noport-btn' : 'export-btn'}
                  target='_blank'
                  href={menuAuth ? href : null}>Export</a>
                <Table
                  bordered
                  pagination={{
                    showQuickJumper: true,
                    total: rowTotal
                  }}
                  onChange={this.pageChange}
                  dataSource={orderList}
                  columns={columns} />
              </div>
              : <div className='no-data'>
                <div className='no-data-icon'>
                  <IconDom code='icon-zanwuneirong' />
                </div>
                No Data
              </div>
          }
        </div>

      </div>
    </div>
  }
}

let OrderWrap = Form.create()(Order)
export default connect(state => {
  return state.menuModel
})(OrderWrap)
